<template>
  <div class="dialogForm">
    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="false"
      :before-close="handleClose"
      width="42%">
      <span slot="title" class="dialog-title">Basic Information</span>
      <!-- "infoForm.eqpStatus|echartsColor" -->
      <div :style="{'background':setColor(infoForm.eqpStatus)}" class="model-title">{{ infoForm.allEqpId }}</div>
      <!-- 第一部分表格 -->
      <infoTable :info-form="infoForm"/>
      <!-- 手风琴表单 -->
      <div class="panel panel-info">
        <div class="panel-heading">
          <span>Test Information</span>
        </div>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="Lot" name="1">
            <lotInfoTable :lotinfo-form="lotInfo"/>
          </el-collapse-item>
          <el-collapse-item title="Yield" name="2">
            <yieldTable :yield-info-form="yieldInfo"/>
          </el-collapse-item>
          <el-collapse-item title="UPH" name="3">
            <uphTable :uph-info-form="uphInfo"/>
          </el-collapse-item>
          <el-collapse-item title="Sites" name="4">
            <sitesTable :sites-form="sitesInfo" :eqp-id="infoForm.eqp2Id"/>
          </el-collapse-item>
          <el-collapse-item title="Bin Info" name="5">
            <binInfoTable :bin-form="binInfo"/>
          </el-collapse-item>
          <el-collapse-item title="Tooling" name="6">
            <toolingTable :tooling-form="toolingInfo"/>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import eqpAreaApi from '@/api/production/eqpMonitor'
import infoTable from './infoTable'
import lotInfoTable from './lotInfoTable'
import yieldTable from './yieldTable'
import uphTable from './uphTable'
import sitesTable from './sitesTable'
import binInfoTable from './binInfoTable'
import toolingTable from './toolingTable'
export default {
  name: 'DialogForm',
  components: { infoTable, lotInfoTable, yieldTable,
    uphTable, sitesTable, binInfoTable, toolingTable },
  data() {
    return {
      dialogVisible: false,
      infoForm: {},
      activeNames: [],
      lotInfo: {}, // lotinfo信息
      sitesInfo: {}, // sitesinfo信息
      binInfo: [], // binfo信息
      yieldInfo: {}, // yieldInfo信息
      uphInfo: {}, // uphInfo信息
      toolingInfo: [] // toolingInfo信息
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    setColor(val) {
      const colors = {
        'RUN': '#1AD175',
        'ALARM': '#EC4014',
        'IDLE': '#3F8EDD',
        'NETWORKFAILURE': '#959595',
        'STOP': '#FFDD20'
      }
      return colors[val]
    },
    // 打开弹窗
    openDialog(val = {}) {
      this.dialogVisible = true
      this.infoForm = val
      console.log('子组件接收到了', val)
    },
    // 左键获取lot info信息
    async getLotInfo() {
      const res = await eqpAreaApi.getLotInfo({ EqpName: this.infoForm.eqp1Id })
      this.lotInfo = res.data
    },
    //  左键获取site info信息
    async getSiteInfo() {
      const res = await eqpAreaApi.getSiteInfo({ EqpId: this.infoForm.eqp2Id })
      this.sitesInfo = res.data
    },
    //  左键获取bin info信息
    async getBinInfo() {
      const res = await eqpAreaApi.getBinInfo({ EqpId: this.infoForm.eqp2Id })
      this.binInfo = res.data
    },
    //  左键获取Yield Info信息
    async getYieldInfo() {
      const res = await eqpAreaApi.getYieldInfo({ EqpName: this.infoForm.eqp1Id })
      this.yieldInfo = res.data
    },
    //  左键获取UPH Info信息
    async getUPHInfo() {
      const res = await eqpAreaApi.getUPHInfo({ EqpName: this.infoForm.eqp1Id })
      this.uphInfo = res.data
    },
    //  左键获取Tooling Info信息
    async getToolingInfo() {
      const res = await eqpAreaApi.getToolingInfo({ EqpName: this.infoForm.eqp1Id })
      this.toolingInfo = res.data
    },
    handleChange(val) {
      const idx = val[val.length - 1]
      switch (idx) {
        case '1':
          this.getLotInfo()
          break
        case '2':
          this.getYieldInfo()
          break
        case '3':
          this.getUPHInfo()
          break
        case '4':
          this.getSiteInfo()
          break
        case '5':
          this.getBinInfo()
          break
        case '6':
          this.getToolingInfo()
          break
        default:
          break
      }
    },
    // 关闭弹窗
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>
<style lang='scss' scoped>
::v-deep .el-dialog__header {
  padding: 5px 6px;
  width: 100%;
  margin: 0 auto;
  background-color: #d9edf7;
  color: #3a87ad;
}
::v-deep .el-dialog__body {
  padding: 0 0px;
}
::v-deep .el-dialog{
  padding:  5px;
}
.dialogForm {
  .model-title {
    width: 100%;
    color: #fff;
    font-size: 18px;
    padding: 10px;
  }
}
.panel {
  margin-bottom: 20px;
  margin-top: 20px;
  background-color: #ffffff;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  .panel-heading {
    border-bottom: 1px solid transparent;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    color: #3a87ad;
    background-color: #d9edf7;
    border-color: #bce8f1;
    font-size: 16px;
    padding: 5px 8px;
    span {
      display: inline-block;
      width: 100%;
      height: 100%;
      line-height: 1;
    }
  }
}
::v-deep .el-collapse-item__header {
  background-color: #f5f5f5;
  height: 35px;
  margin-bottom: 5px;
  padding-left: 5px;
}
</style>
